<template>
    <div style="width:100%;height:60%">
        <a-select
            v-model:value="chosenDate"
            style="margin-left: 20px;width: 18%"
            @change="handleChange"
        >
            <a-select-option 
                v-for="item in dateList" 
                :key="item.value" 
                :value="item.value"
            >
                {{ item.label }}
            </a-select-option>
        </a-select>
        <el-table
            :data="tableData"
            stripe
            class="table">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="wea"
                label="天气"
                width="180">
            </el-table-column>
            <el-table-column
                prop="tem"
                label="气温">
            </el-table-column>
            <el-table-column
                prop="air_level"
                label="空气质量">
            </el-table-column>
        </el-table>
        <wg-graph v-if="update" :weather_graph_data="predictGraph"/>
    </div>
</template>

<script>
import request from "@/utils/request";
import wgGraph from './WgGraph.vue';
var dayjs = require('dayjs')
var customParseFormat = require('dayjs/plugin/customParseFormat')
var predictGraphJSON = require('@/assets/predict.json')
dayjs.extend(customParseFormat)
export default {
    name: 'predict',
    components: {
        wgGraph
    },
    data() {
        return {
            allTableData: null,
            tableData: null,
            chosenDate: '',
            dateList: [],
            eventResult: null,
            update: true,
        }
    },
    computed: {
        predictGraph() {
            return predictGraphJSON;
        }
    },
    methods: {
        reload() {
            this.update = false;
            this.$nextTick( () => {
                this.update = true;
            })
        },
        async getWeatherData() {
            const url = 'http://www.tianqiapi.com/api?version=v1&appid=48419843&appsecret=dgmTH5DR';
            // const url = "http://www.tianqiapi.com/api?version=v1&appid=47275543&appsecret=eIyodj6y";
            const res = await request.get(url, {});
            this.allTableData = res.data;
            // this.tableData = this.allTableData;
        },
        async changePredict() {
            const params = {
                "Daytime": this.tableData[0].hours[0].hours,
                "tem": this.tableData[0].hours[0].tem,
                "WD": this.tableData[0].hours[0].win,
                "WS": this.tableData[0].hours[0].win_speed,
                "RH": this.tableData[0].wea
            }
            const res = await request.post('/predict', params);
            this.predictGraph.predict.relationships.forEach(element => {
                if (element.id === 'A0') {
                    element.showName = res.cross_door
                } else if (element.id === 'A1') {
                    element.showName = res.disorder_dry
                } else if (element.id === 'A2') {
                    element.showName = res.expose_rubish
                } else if (element.id === 'A3') {
                    element.showName = res.graffiti
                } else if (element.id === 'A4') {
                    element.showName = res.hole_cover
                } else if (element.id === 'A5') {
                    element.showName = res.illegal_building
                } else if (element.id === 'A6') {
                    element.showName = res.illegal_saling
                } else if (element.id === 'A7') {
                    element.showName = res.influence_traffic
                } else if (element.id === 'A8') {
                    element.showName = res.line_fall
                } else if (element.id === 'A9') {
                    element.showName = res.occupy_road_and_construction
                } else if (element.id === 'A10') {
                    element.showName = res.road_broke
                } else if (element.id === 'A11') {
                    element.showName = res.tree
                }
            })
            this.predictGraph.predict.nodes.forEach(node => {
                if (node.id === 'a0') {
                    node.showName = this.tableData[0].wea
                }
            })
            this.reload();
        },
        async handleChange() {
            this.tableData = [];
            this.allTableData.forEach(element => {
                let date = element.date
                if (date === this.chosenDate) {
                    this.tableData.push(element)
                }
            });
            await this.changePredict();
        },
        timeListInit() {
            let date = dayjs();
            for (let i = 0; i < this.allTableData.length; ++i) {
                let dateString = date.format("YYYY-MM-DD");
                this.dateList.push({
                    value: dateString,
                    label: dateString,
                })
                date = date.add(1, 'day');
            }
        },
    },
    async created() {
        this.chosenDate = dayjs().format("YYYY-MM-DD");
        await this.getWeatherData();
        this.timeListInit();
        this.handleChange();
    },
}
</script>

<style lang="scss">
    .title {
        display: flex;
        justify-content: center;
        padding-top: 1.5%;
        color: rgb(179, 239, 255);
        font-size: 16;
        font-weight: bold;
    }
    .el-table td {
        background-color: rgb(179, 239, 255);
        // border-color: black;
    }
    .el-table th.is-leaf {
        background-color: rgb(36, 194, 238);
        color: white;
        border-color: rgb(36, 194, 238);
    }
    .table{
        margin-left: 20px;
        margin-top: 20px;
        width: calc(100% - 40px)
    }
    // .el-table--group {
    //     background-color: rgb(0, 0, 0);
    // }
    // .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
    //     // border-color: black;
    //     background-color: rgb(179, 239, 255);
    //     color: white;
    // }
</style>